<template>
  <el-dialog title="添加成员" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
    <el-form :inline="true" class="search-wrap">
      <el-form-item label="关键词">
        <el-input v-model="q.keyWords" placeholder="关键词" @keyup.enter.native="load"/>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="warning" icon="el-icon-search" @click="load">搜索</el-button>
        <el-button type="default" icon="el-icon-refresh" @click="resetSeach">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :key="tableKey" v-loading="tableLoading" :data="items" border fit highlight-current-row style="width: 100%;">
      <el-table-column :label="'姓名'" prop="name" min-width="300" align="center"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" :loading="isSubmitLoading" @click="addMember(row.value)">添加到组织</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="totalCount > 0" :total="totalCount" :page-index.sync="q.pageIndex" :page-size.sync="q.pageSize" @pagination="getList"/>
  </el-dialog>
</template>
<script>
import { getUserPagingListForOu, addUserToOrganizationUnit } from "@/api/organization-unit";
import Pagination from "@/components/Pagination";

export default {
  components: {
    pagination: Pagination
  },
  data() {
    return {
      dialogVisible: false,
      isSubmitLoading: false,
      organizationUnitId: undefined,

      q: {
        keyWords: undefined,
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      items: [],
      tableLoading: true,
      tableKey: 0
    };
  },
  methods: {
    show(ouId) {
      if (ouId) {
        this.organizationUnitId = ouId;
        this.isSubmitLoading = false;
        this.dialogVisible = true;
        this.load();
      } else {
        this.$message({ message: "请选择正确的组织", type: "warning" });
      }
    },
    resetSeach() {
      this.q = {
        keyWords: undefined,
        pageIndex: 1,
        pageSize: 10
      };
      this.load();
    },
    load() {
      this.q.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      getUserPagingListForOu(this.q).then(result => {
        this.items = result.items;
        this.totalCount = result.totalCount;
        this.tableLoading = false;
      });
    },
    addMember(userId) {
      this.isSubmitLoading = true;
      const model = {
        userId: userId,
        organizationUnitId: this.organizationUnitId
      };
      addUserToOrganizationUnit(model)
        .then(() => {
          this.$message({ message: "添加人员成功！", type: "success" });
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          this.load();
          this.$emit("save");
        })
        .catch(() => {
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        });
    },
    close() {
      this.dialogVisible = false;
      this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
    }
  }
};
</script>
